<template>
	<view class="pet-my-container">
		<!-- 顶部背景 -->
		<view class="pet-header">
			<image class="header-pattern" src="/static/img/header-pattern.png" mode="scaleToFill"></image>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar-area">
				<u-avatar class="avatar" bg-color="#fff" size="140" :src="userInfo.avatarUrl || '/static/img/default-pet-avatar.svg'"></u-avatar>
				<view class="paw-icon paw-icon-1"></view>
				<view class="paw-icon paw-icon-2"></view>
				<view class="paw-icon paw-icon-3"></view>
				<view class="paw-icon paw-icon-4"></view>
			</view>
			<view class="user-info">
				<text class="username">{{userInfo.nickname || userInfo.realName || '铲屎官'}}</text>
				<text class="pet-slogan">每天都是撸猫遛狗的好日子</text>
			</view>
		</view>
		
		<!-- 用户详细信息 -->
		<view class="user-details-section" v-if="userDetailVisible">
			<view class="section-header">
				<view class="paw-mark"></view>
				<text>用户信息</text>
				<view class="header-right" @tap="toggleUserDetail">
					<text class="hide-text">收起</text>
					<u-icon name="arrow-up" color="#8B5CFF" size="24"></u-icon>
				</view>
			</view>
			
			<view class="user-details-content">
				<view class="detail-item" v-if="userInfo.objectId">
					<text class="label">用户ID：</text>
					<text class="value">{{userInfo.objectId}}</text>
				</view>
				<view class="detail-item" v-if="userInfo.username">
					<text class="label">用户名：</text>
					<text class="value">{{userInfo.username}}</text>
				</view>
				<view class="detail-item" v-if="userInfo.nickname || userInfo.nickName">
					<text class="label">昵称：</text>
					<text class="value">{{userInfo.nickname || userInfo.nickName}}</text>
				</view>
				<view class="detail-item" v-if="userInfo.email">
					<text class="label">邮箱：</text>
					<text class="value">{{userInfo.email}}</text>
				</view>
				<view class="detail-item" v-if="userInfo.mobilePhoneNumber">
					<text class="label">手机：</text>
					<text class="value">{{userInfo.mobilePhoneNumber}}</text>
				</view>
				<view class="detail-item" v-if="userInfo.gender !== undefined">
					<text class="label">性别：</text>
					<text class="value">{{userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未知'}}</text>
				</view>
				<view class="detail-item" v-if="userInfo.createdAt">
					<text class="label">注册时间：</text>
					<text class="value">{{formatDate(userInfo.createdAt)}}</text>
				</view>
				<view class="detail-item location" v-if="userInfo.province || userInfo.city">
					<text class="label">位置：</text>
					<text class="value">{{[userInfo.province, userInfo.city].filter(Boolean).join(' ')}}</text>
				</view>
                
                <view class="action-buttons">
                    <button class="refresh-button" @tap="refreshUserInfo">刷新</button>
                    <button class="update-button" @tap="openUpdateForm">修改资料</button>
                </view>
			</view>
		</view>
		
		<!-- 显示用户信息按钮 -->
		<view class="toggle-section" v-if="!userDetailVisible">
			<view class="toggle-button" @tap="toggleUserDetail">
				<text>查看我的账户信息</text>
				<u-icon name="arrow-down" color="#8B5CFF" size="24"></u-icon>
			</view>
		</view>
		
		<!-- 宠物服务板块 -->
		<view class="service-section">
			<view class="section-header">
				<view class="paw-mark"></view>
				<text>萌宠服务</text>
			</view>
			
			<view class="service-grid">
				<view class="service-item" @tap="navigateTo('/pages/pet/info')">
					<view class="service-icon pet-archives"></view>
					<text>宠物档案</text>
				</view>
				<view class="service-item" @tap="navigateTo('/pages/pet/health')">
					<view class="service-icon pet-health"></view>
					<text>健康记录</text>
				</view>
				<view class="service-item" @tap="navigateTo('/pages/pet/memory')">
					<view class="service-icon pet-gallery"></view>
					<text>萌宠相册</text>
				</view>
				<view class="service-item" @tap="navigateTo('/pages/pet/remind')">
					<view class="service-icon pet-reminder"></view>
					<text>宠物提醒</text>
				</view>
			</view>
		</view>
		
		<!-- 设置板块 -->
		<view class="settings-section">
			<view class="section-header">
				<view class="paw-mark"></view>
				<text>我的设置</text>
			</view>
			
			<view class="settings-list">
				<view class="settings-item" @tap="toLeanCloudDemo">
					<view class="settings-icon leancloud-icon"></view>
					<text>LeanCloud示例</text>
					<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
				</view>
				<view class="settings-item" @tap="navigateTo('/pages/my/settings')">
					<view class="settings-icon settings-gear"></view>
					<text>系统设置</text>
					<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
				</view>
				<view class="settings-item" @tap="navigateTo('/pages/my/about')">
					<view class="settings-icon about-icon"></view>
					<text>关于我们</text>
					<u-icon name="arrow-right" color="#CCCCCC" size="24"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-container">
			<button class="logout-button" @tap="logout">退出登录</button>
		</view>
		
		<!-- 底部装饰 -->
		<view class="footer-decoration">
			<view class="paw-steps"></view>
		</view>
		
		<!-- 用户资料修改弹窗 -->
		<view class="popup-mask" v-if="showUpdatePopup" @tap="closeUpdateForm"></view>
		<view class="update-popup" v-if="showUpdatePopup">
			<view class="popup-header">
				<text class="popup-title">修改资料</text>
				<view class="close-btn" @tap="closeUpdateForm">
					<u-icon name="close" color="#999" size="24"></u-icon>
				</view>
			</view>
			
			<view class="popup-content">
				<view class="form-item">
					<text class="form-label">昵称</text>
					<input class="form-input" v-model="updateForm.nickname" placeholder="请输入昵称" />
				</view>
				
				<view class="form-item">
					<text class="form-label">邮箱</text>
					<input class="form-input" v-model="updateForm.email" placeholder="请输入邮箱" />
				</view>
				
				<view class="form-item">
					<text class="form-label">手机</text>
					<input class="form-input" v-model="updateForm.mobilePhoneNumber" placeholder="请输入手机号" />
				</view>
				
				<view class="form-item">
					<text class="form-label">性别</text>
					<picker class="form-picker" @change="bindGenderChange" :value="genderIndex" :range="genderArray">
						<view class="picker-text">
							{{genderArray[genderIndex]}}
						</view>
					</picker>
				</view>
				
				<button class="submit-button" @tap="submitUpdateForm">保存修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import global from '@/plugins/global'
	export default {
		data() {
			return {
				global: global,
				userInfo: {},
				userDetailVisible: false,
				showUpdatePopup: false,
				updateForm: {
					nickname: '',
					email: '',
					mobilePhoneNumber: '',
					gender: 0
				},
				genderArray: ['未知', '男', '女'],
				genderIndex: 0
			}
		},
		onLoad() {
			this.userInfo = getApp().globalData;
			this.checkLoginStatus();
		},
		onShow() {
			// 每次页面显示时都刷新用户信息
			this.fetchUserInfo();
		},
		methods: {
			// 通用页面跳转方法
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			// 检查登录状态
			async checkLoginStatus() {
				try {
					const user = await this.$leanCloud.user.getCurrent();
					if (!user) {
						uni.redirectTo({
							url: '/pages/login/wechatEntry'
						});
					} else {
						this.userInfo = user;
						console.log('当前用户信息:', user);
					}
				} catch (error) {
					console.error('检查登录状态失败:', error);
				}
			},
			
			// 获取最新的用户信息
			async fetchUserInfo() {
				try {
					// 获取基本用户信息
					const user = await this.$leanCloud.user.getCurrent();
					if (user) {
						console.log('基本用户信息:', user);
						
						// 获取更完整的用户信息
						try {
							const userId = wx.getStorageSync('leancloud_user_id');
							if (userId) {
								// 通过用户ID获取用户详细信息
								const userDetail = await this.$leanCloud.get('_User', userId);
								console.log('获取到的用户详细信息:', userDetail);
								
								// 合并用户信息
								this.userInfo = {
									...user,
									...userDetail
								};
								
								console.log('合并后的用户信息:', this.userInfo);
							} else {
								this.userInfo = user;
							}
						} catch (detailError) {
							console.error('获取用户详细信息失败:', detailError);
							// 如果获取详细信息失败，至少显示基本信息
							this.userInfo = user;
						}
						
						// 更新全局用户数据
						if (getApp() && getApp().globalData) {
							Object.assign(getApp().globalData, {
								nickname: this.userInfo.nickname,
								avatarUrl: this.userInfo.avatarUrl,
								isLogin: true
							});
						}
					}
				} catch (error) {
					console.error('获取用户信息失败:', error);
				}
			},
			
			// 前往LeanCloud示例页面
			toLeanCloudDemo() {
				uni.navigateTo({
					url: '/pages/leancloud/demo'
				});
			},
			
			// 退出登录
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '铲屎官确定要离开吗？',
					confirmColor: '#8B5CFF',
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.$leanCloud.user.logout();
								wx.removeStorageSync('leancloud_session_token');
								wx.removeStorageSync('leancloud_user_id');
								if (getApp() && getApp().globalData) {
									getApp().globalData.isLogin = false;
									getApp().globalData.nickname = '';
									getApp().globalData.avatarUrl = '';
								}
								uni.reLaunch({
									url: '/pages/login/wechatEntry'
								});
							} catch (error) {
								console.error('退出登录失败:', error);
								uni.showToast({
									title: '退出失败，请重试',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			
			// 切换用户详细信息显示状态
			toggleUserDetail() {
				this.userDetailVisible = !this.userDetailVisible;
			},
			
			// 格式化日期
			formatDate(date) {
				const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
				return new Date(date).toLocaleDateString(undefined, options);
			},
			
			// 刷新用户信息
			async refreshUserInfo() {
				await this.fetchUserInfo();
				uni.showToast({
					title: '用户信息刷新成功',
					icon: 'none'
				});
			},
			
			// 打开用户资料修改表单
			openUpdateForm() {
				// 初始化表单数据
				this.updateForm.nickname = this.userInfo.nickname || '';
				this.updateForm.email = this.userInfo.email || '';
				this.updateForm.mobilePhoneNumber = this.userInfo.mobilePhoneNumber || '';
				
				// 设置性别下拉框的选中值
				this.genderIndex = this.userInfo.gender >= 0 && this.userInfo.gender <= 2 ? this.userInfo.gender : 0;
				
				// 显示弹窗
				this.showUpdatePopup = true;
			},
			
			// 关闭用户资料修改表单
			closeUpdateForm() {
				this.showUpdatePopup = false;
			},
			
			// 绑定性别选择
			bindGenderChange(e) {
				this.genderIndex = e.detail.value;
			},
			
			// 提交用户资料修改
			async submitUpdateForm() {
				try {
					// 显示加载提示
					uni.showLoading({
						title: '保存中...'
					});
					
					// 获取用户ID
					const userId = wx.getStorageSync('leancloud_user_id');
					if (!userId) {
						throw new Error('用户未登录');
					}
					
					// 构建更新数据
					const updateData = {
						nickname: this.updateForm.nickname,
						gender: parseInt(this.genderIndex)
					};
					
					// 只有当邮箱有值且与原值不同时才更新
					if (this.updateForm.email && this.updateForm.email !== this.userInfo.email) {
						updateData.email = this.updateForm.email;
					}
					
					// 只有当手机号有值且与原值不同时才更新
					if (this.updateForm.mobilePhoneNumber && this.updateForm.mobilePhoneNumber !== this.userInfo.mobilePhoneNumber) {
						updateData.mobilePhoneNumber = this.updateForm.mobilePhoneNumber;
					}
					
					console.log('提交更新数据:', updateData);
					
					// 调用LeanCloud API更新用户资料
					const result = await this.$leanCloud.update('_User', userId, updateData);
					console.log('更新用户资料结果:', result);
					
					// 更新成功后刷新用户信息
					await this.fetchUserInfo();
					
					// 关闭弹窗
					this.closeUpdateForm();
					
					// 显示成功提示
					uni.showToast({
						title: '资料更新成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('更新用户资料失败:', error);
					uni.showToast({
						title: '更新失败: ' + (error.message || '请重试'),
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="scss">
	/* 整体配色方案:
	 * 主色: #8B5CFF (温和的紫色)
	 * 辅助色: #FFD687 (温暖的橙黄色)
	 * 背景色: #F5F6FA (淡淡的灰蓝色背景)
	 * 文本颜色: #333, #666, #999 三级
	 */
	page {
		background-color: #F5F6FA;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
	}
	
	.pet-my-container {
		min-height: 100vh;
		position: relative;
		padding-bottom: 120rpx;
	}
	
	/* 头部区域 */
	.pet-header {
		height: 220rpx;
		background: linear-gradient(to right, #8B5CFF, #A47EFF);
		position: relative;
		overflow: hidden;
		
		.header-pattern {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0.1;
		}
		
		.page-title {
			position: absolute;
			left: 0;
			right: 0;
			top: 136rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 34rpx;
			font-weight: 500;
		}
	}
	
	/* 用户卡片 */
	.user-card {
		margin: -60rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 12rpx rgba(139, 92, 255, 0.1);
		position: relative;
		z-index: 10;
		
		.user-avatar-area {
			display: flex;
			justify-content: center;
			position: relative;
			height: 150rpx;
			
			.avatar {
				border: 4rpx solid #FFFFFF;
				box-shadow: 0 8rpx 16rpx rgba(139, 92, 255, 0.2);
			}
			
			.paw-icon {
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				background-color: #8B5CFF;
				border-radius: 50%;
				
				&::before {
					content: '';
					position: absolute;
					top: -10rpx;
					left: -6rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #8B5CFF;
					border-radius: 50%;
				}
				
				&::after {
					content: '';
					position: absolute;
					top: -10rpx;
					right: -6rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #8B5CFF;
					border-radius: 50%;
				}
				
				&.paw-icon-1 {
					top: 40rpx;
					left: 50%;
					margin-left: -120rpx;
					transform: rotate(30deg);
				}
				
				&.paw-icon-2 {
					top: 80rpx;
					left: 50%;
					margin-left: -140rpx;
					transform: rotate(60deg);
				}
				
				&.paw-icon-3 {
					top: 40rpx;
					right: 50%;
					margin-right: -120rpx;
					transform: rotate(-30deg);
				}
				
				&.paw-icon-4 {
					top: 80rpx;
					right: 50%;
					margin-right: -140rpx;
					transform: rotate(-60deg);
				}
			}
		}
		
		.user-info {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.username {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 6rpx;
			}
			
			.pet-slogan {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	
	/* 用户详细信息 */
	.user-details-section {
		margin: 20rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.03);
		
		.section-header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 10rpx;
			
			.paw-mark {
				width: 36rpx;
				height: 36rpx;
				background-color: #FFD687;
				border-radius: 50%;
				margin-right: 16rpx;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					top: -12rpx;
					left: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFD687;
					border-radius: 50%;
				}
				
				&::after {
					content: '';
					position: absolute;
					top: -12rpx;
					right: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFD687;
					border-radius: 50%;
				}
			}
			
			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.header-right {
				margin-left: auto;
				display: flex;
				align-items: center;
				
				.hide-text {
					font-size: 28rpx;
					color: #8B5CFF;
					margin-right: 8rpx;
				}
			}
		}
		
		.user-details-content {
			.detail-item {
				display: flex;
				align-items: center;
				padding: 30rpx 20rpx;
				border-bottom: 1px solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.label {
					font-size: 28rpx;
					color: #666666;
					margin-right: 20rpx;
				}
				
				.value {
					font-size: 28rpx;
					color: #333333;
				}
			}
			
			.location {
				.label {
					margin-right: 20rpx;
				}
				
				.value {
					font-size: 28rpx;
				}
			}
			
			.action-buttons {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				
				.refresh-button, .update-button {
					background: linear-gradient(to right, #8B5CFF, #A68CFE);
					color: white;
					border-radius: 40rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					box-shadow: 0 8rpx 16rpx rgba(139, 92, 255, 0.3);
					flex: 1;
					margin: 0 10rpx;
					
					&:active {
						opacity: 0.9;
					}
				}
			}
		}
	}
	
	/* 显示用户信息按钮 */
	.toggle-section {
		margin: 20rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.03);
		
		.toggle-button {
			background: linear-gradient(to right, #8B5CFF, #A68CFE);
			color: white;
			border-radius: 40rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			box-shadow: 0 8rpx 16rpx rgba(139, 92, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			
			&:active {
				opacity: 0.9;
			}
		}
	}
	
	/* 通用板块样式 */
	.service-section, .settings-section {
		margin: 0 30rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.03);
		
		.section-header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 10rpx;
			
			.paw-mark {
				width: 36rpx;
				height: 36rpx;
				background-color: #FFD687;
				border-radius: 50%;
				margin-right: 16rpx;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					top: -12rpx;
					left: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFD687;
					border-radius: 50%;
				}
				
				&::after {
					content: '';
					position: absolute;
					top: -12rpx;
					right: -4rpx;
					width: 18rpx;
					height: 18rpx;
					background-color: #FFD687;
					border-radius: 50%;
				}
			}
			
			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
	
	/* 服务网格 */
	.service-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
		
		.service-item {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			position: relative;
			
			&:active {
				background-color: #f9f9f9;
				border-radius: 12rpx;
			}
			
			.service-icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					width: 56rpx;
					height: 56rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
				}
				
				&.pet-archives {
					background-color: rgba(139, 92, 255, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
					}
				}
				
				&.pet-health {
					background-color: rgba(255, 214, 135, 0.2);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFB321" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>');
					}
				}
				
				&.pet-gallery {
					background-color: rgba(79, 193, 233, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234FC1E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>');
					}
				}
				
				&.pet-reminder {
					background-color: rgba(70, 227, 159, 0.1);
					
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2346E39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>');
					}
				}
			}
			
			text {
				font-size: 26rpx;
				color: #666666;
			}
		}
	}
	
	/* 设置列表 */
	.settings-list {
		.settings-item {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:active {
				background-color: #f9f9f9;
				border-radius: 12rpx;
			}
			
			.settings-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				
				&::before {
					content: '';
					position: absolute;
					width: 36rpx;
					height: 36rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
				}
				
				&.leancloud-icon {
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>');
					}
				}
				
				&.settings-gear {
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>');
					}
				}
				
				&.about-icon {
					&::before {
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B5CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
					}
				}
			}
			
			text {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
	/* 退出登录按钮 */
	.logout-container {
		padding: 30rpx;
		margin-top: 30rpx;
		
		.logout-button {
			background: linear-gradient(to right, #8B5CFF, #A68CFE);
			color: white;
			border-radius: 40rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			box-shadow: 0 8rpx 16rpx rgba(139, 92, 255, 0.3);
			
			&:active {
				opacity: 0.9;
			}
		}
	}
	
	/* 底部装饰 */
	.footer-decoration {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		overflow: hidden;
		
		.paw-steps {
			height: 80rpx;
			width: 100%;
			position: absolute;
			bottom: 0;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="40" viewBox="0 0 400 40"><g opacity="0.2" fill="%238B5CFF"><circle cx="8" cy="12" r="4"/><circle cx="2" cy="8" r="2"/><circle cx="14" cy="8" r="2"/><circle cx="4" cy="25" r="4"/><circle cx="25" cy="12" r="4"/><circle cx="19" cy="8" r="2"/><circle cx="31" cy="8" r="2"/><circle cx="21" cy="25" r="4"/><circle cx="42" cy="12" r="4"/><circle cx="36" cy="8" r="2"/><circle cx="48" cy="8" r="2"/><circle cx="38" cy="25" r="4"/><circle cx="59" cy="12" r="4"/><circle cx="53" cy="8" r="2"/><circle cx="65" cy="8" r="2"/><circle cx="55" cy="25" r="4"/><circle cx="76" cy="12" r="4"/><circle cx="70" cy="8" r="2"/><circle cx="82" cy="8" r="2"/><circle cx="72" cy="25" r="4"/><circle cx="93" cy="12" r="4"/><circle cx="87" cy="8" r="2"/><circle cx="99" cy="8" r="2"/><circle cx="89" cy="25" r="4"/></g></svg>');
			background-repeat: repeat-x;
			opacity: 0.5;
		}
	}
	
	/* 用户资料修改弹窗 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}
	
	.update-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 400rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		z-index: 1000;
		
		.popup-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.popup-title {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.close-btn {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.popup-content {
			.form-item {
				margin-bottom: 20rpx;
				
				.form-label {
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 10rpx;
				}
				
				.form-input {
					width: 100%;
					height: 80rpx;
					border: 1px solid #f0f0f0;
					border-radius: 40rpx;
					padding: 20rpx;
				}
			}
			
			.form-picker {
				width: 100%;
				height: 80rpx;
				border: 1px solid #f0f0f0;
				border-radius: 40rpx;
				padding: 20rpx;
			}
			
			.picker-text {
				font-size: 28rpx;
				color: #333333;
			}
			
			.submit-button {
				background: linear-gradient(to right, #8B5CFF, #A68CFE);
				color: white;
				border-radius: 40rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				box-shadow: 0 8rpx 16rpx rgba(139, 92, 255, 0.3);
				width: 100%;
			}
		}
	}
</style>